<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TNWX 微信系开发脚手架-微信支付</title>
    <meta charset="utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="keywords" content="tnwx,nodejs,微信公众号开发" />
    <meta
      http-equiv="description"
      content="TNWX:TypeScript + Node.js + WeiXin 微信系开发脚手架，支持微信公众号、微信支付、微信小游戏、微信小程序、企业微信/企业号。最最最重要的是能快速的集成至任何 Node.js 框架(Express、Nest、Egg、Koa 等)"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://www.weixinsxy.com/jssdk/css/style.css" />
  </head>

  <body>
    <div class="wxapi_container">
      <div class="lbox_close wxapi_form">
        <h3 id="menu-basic">微信支付</h3>
        <span class="desc">微信公众号支付</span>
        <button class="btn btn_primary" id="toPay">toPay</button>
      </div>
    </div>
  </body>
  <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script type="text/javascript">
    document.querySelector('#toPay').onclick = function() {
      $.get('http://192.168.0.101:8888/wxpay?type=13', function(res) {
        let data = JSON.parse(res)

        if (typeof WeixinJSBridge == 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data))
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data))
          }
        } else {
          onBridgeReady(data)
        }
      })
    }

    function onBridgeReady(data) {
      alert(JSON.stringify(data))
      WeixinJSBridge.invoke('getBrandWCPayRequest', data, function(res) {
        alert(JSON.stringify(res))
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          alert('支付成功...')
        }
      })
    }
  </script>
</html>
